<template>
  <div class="refund_detail">
    <div>
      <van-tabs v-model="active" color="#ff7340" swipeable @click="onClickTab">
        <van-tab title="订单信息"><tplDetail ref="tplDetails" :refund-detail="refundDetail" @detailData="detailData"/></van-tab>
        <van-tab title="退款记录"><pay-record ref="payRecords" :refund-detail="refundDetail"/></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import tplDetail from './tplDetail'
  import payRecord from './payRecord'
  export default {
    name: 'Index',
    components: {
      tplDetail,
      payRecord
    },
    data() {
      return {
        active: 0,
        refundDetail: undefined
      }
    },
    mounted() {
      this.onClickTab(0)
      setTimeout(() => {
        this.whichType()
      }, 100)
    },
    methods: {
      whichType() {
        const route = this.$route.query
        if (route.type && route.type === 'receive') {
          this.active = 2
          this.onClickTab(2)
        }
      },
      onClickTab(index) {
        if (index === 0) {
          if (this.$refs.tplDetails) {
            // this.$refs.tplDetails.GetrefundDetailFn()
          }
        }
        if (index === 1) {
          if (this.$refs.payRecords) {
            this.$refs.payRecords.getOrderGatheringListFn()
          }
        }
      },
      detailData(val) {
        this.refundDetail = val
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
</style>
